<template>
	<view class="register">
		<div class="form">
			<account-form :formData="formData" :rules="rules"></account-form>
		</div>

	</view>
</template>

<script>
import AccountForm from '@/components/AccountForm.vue'
export default {
	name: "rigister",
	components: {
		AccountForm
	},
	data() {
		return {
			formData: [
				{
					type: 'primary',
					prop: "mobile",
					placeholder: '请输入手机号码'
				},
				{
					type: 'code',
					prop: "code",
					placeholder: '请输入短信验证码'
				},
				{
					type: 'password',
					prop: "loginpass",
					placeholder: '请设置登录密码'
				},
				{
					type: 'password',
					prop: "quepass",
					placeholder: '请再次确认登录密码'
				},

			],
			// 校验
			rules: {
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}
				],
				loginpass: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				],
				quepass: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.code(value, 6)
						},
						message: '请输入正确6位验证码',
						// 触发器可以同时用blur和change
						trigger: 'blur',
					},
				],
			},
		};
	},
	methods: {}
};

</script>

<style lang="scss" scoped>
.register {
	margin: 50rpx;
}
</style>
